<template>
	<view class="container">
		<view class="haeder">
			<img class="bgimg" :src="playlist.coverImgUrl" alt="">
			<view class="headertitle">
				<view class="headImg">
					<img :src="playlist.coverImgUrl" alt="">
				</view>
				<view class="headRight">
					<p>{{playlist.name}}</p>
					<view class="rightUser">
						<view class="rightImg">
							<img :src="playlist.creator.backgroundUrl" alt="">
						</view>
						<text>
							{{playlist.creator.nickname}}
							<uni-icons type="right" size="20" color="white"></uni-icons>
						</text>
					</view>
					<view style="display: flex; align-items: center;">
						<p class="desc">{{playlist.description}}</p>
						<text>
							<uni-icons type="right" size="15" color="white"></uni-icons>
						</text>
					</view>
				</view>
			</view>
			<view class="iconItem">
				<view class="iconList">
					<uni-icons type="chat-filled" size="30" color="white"></uni-icons>
					<text>{{playlist.commentCount}}</text>
				</view>
				<view class="iconList">
					<uni-icons type="redo" size="30" color="white"></uni-icons>
					<text>{{playlist.shareCount}}</text>
				</view>
				<view class="iconList">
					<uni-icons type="pulldown" size="30" color="white"></uni-icons>
					<text>下载</text>
				</view>
				<view class="iconList">
					<uni-icons type="folder-add" size="30" color="white"></uni-icons>
					<text>多选</text>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="liebiaoTop">
				<view class="topleft">
					<uni-icons custom-prefix="iconfont" type="icon-yinlequan" size="35"></uni-icons>
					<!-- <svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-yinlequan"></use>
					</svg> -->
					<view class="leftTxt">
						播放全部 <text>(共{{this.musicList.length}}首)</text>
					</view>
				</view>
				<view class="rightBtn">
					+ 收藏({{this.playlist.subscribedCount}})
				</view>
			</view>
			<view class="musicItem">
				<view class="musicList" v-for="(item, i) in musicName" :key="i" @click="onMusic(item)">
					<view class="musicLeft">
						<text>{{item.i}}</text>
						<view class="detailed">
							<p>{{item.name}}</p>
							<text>{{item.arName}}</text>
						</view>
					</view>
					<view class="musicRight">
						<uni-icons type="bars" size="25" color="#ccc"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 170rpx;"></view>
		<audioPlayer></audioPlayer>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import audioPlayer from 'components/audioPlayer/audioPlayer.vue'
	// const audios = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				id: '',
				playlist: [],
				musicList: [],
				musicName: [],
				audios: {
					id: '',
					name: '',
					picUrl: ''
				},
				audiosID: '',
				playFlag: true
			};
		},
		components: {
			audioPlayer
		},
		computed: {
			...mapState(['audioPlayer', 'count'])
		},
		mounted() {
			console.log(this);
		},
		onLoad(e) {
			this.id = e
			console.log(this.id);
			this.getMusicItemList()
		},
		methods: {
			...mapMutations(['changeMusic']),

			async getMusicItemList() {
				const {
					data: res
				} = await this.$myRequest({
					url: '/playlist/detail?id=' + this.id.id
				})
				console.log(res);
				this.playlist = res.playlist
				this.musicList = res.privileges
				
				// uni.setStorageSync('m_playList',this.playlist)
				// const value = uni.getStorageSync('m_playList').creator
				// console.log(value);
				// if((this.playlist.creator="")) {
				// 	this.playlist.creator = uni.getStorageSync('m_playList').creator
				// }
				
				for (let i = 0; i < res.playlist.tracks.length; i++) {
					this.musicName.push({
						i: i + 1,
						id: res.privileges[i].id,
						name: res.playlist.tracks[i].name,
						picUrl: res.playlist.tracks[i].al.picUrl,
						arName: res.playlist.tracks[i].ar[0].name
					})
				}
			},
			async onMusic(item) {
				// uni.setStorageSync('music_key', item);、
				// console.log(item);
				console.log(this.$store.state);
				this.audios.id = item.id
				this.audios.name = item.name
				this.audios.picUrl = item.picUrl

				await this.changeMusic({
					audioId: this.audios.id,
					audioImg: this.audios.picUrl,
					audioName: this.audios.name,
					arName: item.arName
				})
			}
		}
	}
</script>

<style lang="less">
	.container {
		width: 750rpx;
		margin: 0 auto;

		.haeder {
			height: 500rpx;
			position: relative;
			padding: 40rpx 20rpx;

			.bgimg {
				width: 100%;
				height: 500rpx;
				position: absolute;
				z-index: -1;
				filter: blur(30px);
			}

			.headertitle {
				display: flex;
				margin-top: 40rpx;

				.headImg {
					border-radius: 20rpx;
					width: 250rpx;
					height: 250rpx;

					img {
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
					}
				}

				.headRight {
					width: 500rpx;
					margin-left: 20rpx;
					color: white;

					p {
						font-weight: bold;
					}

					.rightUser {
						display: flex;
						align-items: center;
						padding: 20rpx 0;

						text {
							margin-left: 20rpx;
						}

						.rightImg {
							width: 70rpx;
							height: 70rpx;

							img {
								border-radius: 50%;
								width: 100%;
								height: 100%;
							}
						}
					}

					.desc {
						width: 400rpx;
						height: 60rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						// white-space: break-spaces; //文字换行
						// text-align: left;
						font-size: 24rpx;
						color: #ccc;
					}
				}
			}

			.iconItem {
				height: 180rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.iconList {
					display: flex;
					flex-direction: column;
					align-items: center;
					color: white;
				}
			}
		}

		.content {
			// border: 1px solid red;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
			// height: 1000rpx;
			background-color: white;

			.liebiaoTop {
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;

				.topleft {
					width: 400rpx;
					height: 120rpx;
					display: flex;
					align-items: center;

					.iconfont {
						width: 60rpx;
						height: 60rpx;
						padding-left: 20rpx;
					}

					.leftTxt {
						font-weight: bold;
						padding-left: 40rpx;

						text {
							color: #ccc;
							font-weight: normal;
							font-size: 24rpx;
						}
					}
				}

				.rightBtn {
					border-radius: 40rpx;
					width: 280rpx;
					height: 80rpx;
					background-color: #FF0000;
					color: white;
					text-align: center;
					line-height: 80rpx;
					margin-right: 20rpx;
				}
			}

			.musicItem {
				width: 750rpx;

				.musicList {
					width: 750rpx;
					height: 120rpx;
					display: flex;

					.musicLeft {
						// border: 1px solid red;
						padding-left: 20rpx;
						width: 500rpx;
						height: 120rpx;
						display: flex;
						align-items: center;

						.detailed {
							margin-left: 30rpx;

							p {
								font-weight: bold;
								font-size: 28rpx;
							}

							text {
								font-size: 24rpx;
								color: #ccc;
							}

						}

					}

					.musicRight {
						width: 250rpx;
						height: 120rpx;
						padding-right: 20rpx;
						display: flex;
						align-items: center;
						flex-direction: row-reverse;
					}
				}
			}
		}
	}
</style>
